import React, { memo, useState } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";

import "./index.scss";
import albumActions from "store/action/albums";

import WYThemHeaderNormal from "@/components/theme-header-normal";
import WYAlbumCover from "@/components/album-cover";
import WYPagination from "@/components/pagination";

const WYTopAlbum = memo(function () {
  const [currentPage, setCurrentPage] = useState(1);
  // redux
  const dispatch = useDispatch();
  const { topAlbums, topTotal } = useSelector(
    (state) => ({
      topAlbums: state.getIn(["albums", "topAlbums"]),
      topTotal: state.getIn(["albums", "topTotal"]),
    }),
    shallowEqual
  );

  const onPageChange = (idx) => {
    if (idx === currentPage) return;
    setCurrentPage(idx);
    dispatch(albumActions.getTopAlbums({ offset: idx }));
  };
  return (
    <div className="wy-top-album">
      <WYThemHeaderNormal title="全部新碟" />
      <div className="album-list">
        {topAlbums.length > 0 &&
          topAlbums.map((item) => (
            <WYAlbumCover
              key={item.id}
              size={130}
              width={153}
              bgp={-845}
              key={item.id}
              info={item}
            />
          ))}
      </div>

      <WYPagination
        currentPage={currentPage}
        total={topTotal}
        pageSize={30}
        onPageChange={onPageChange}
      />
    </div>
  );
});

export default WYTopAlbum;
